<template>
  <div>
    <Title title='创建试卷'/>
    <!-- 表单 -->
    <el-form
      :model="ruleForm"
      status-icon
      ref="ruleForm"
      label-width="180px"
    >
      <el-form-item label="试卷名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="选择的班级" required>
        <el-select v-model="classList" placeholder="请选择班级">
          <el-option
            v-for="item in options"
            :key="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="建议时长(分钟)" required="">
        <el-input-number
          v-model="num"
          :min="1"
          :max="200"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="题目" required>
        <el-button @click="dialogVisible = true">选择题目</el-button>
      </el-form-item>
      <el-form-item label="已选择的题目">
        <el-tag>{{ selectCount }}</el-tag>
      </el-form-item>
      <el-form-item label-width="180px">
        <el-button @click="submit" type='primary' style="width: 500px">创建试卷</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="请选择题目"
      :visible.sync="dialogVisible"
      width="80%"
      @close="handleClose"
    >
      <!-- 试题 -->
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search || data.name.toLowerCase().includes(search.toLowerCase())
          )
        "
        style="width: 100%"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="Id">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="题干">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分数">
          <template slot-scope="scope">
            <span>{{ scope.row.score }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>

        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入题干名搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button size="mini">预览</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
        <el-button></el-button>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllClass } from "@/api/class";
import { getAllSubjects, createPaper } from "@/api/paper";
import { formatTime, info, error, success } from "@/utils";
import Title from '@/components/common/Title'
export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
      options: [],
      classList: "",
      num: 30,
      tableData: [],
      search: "",
      multipleSelection: [],
      dialogVisible: false,
      selectCount: 0,
    };
  },
  components: {
    Title
  },
  methods: {
    /**
     * 选题目
     */
    handleSelectionChange(val) {
      if (val.length === 0) return;
      this.multipleSelection = val;
    },
    /**
     * 打开modal框
     */
    handleClose() {
      this.selectCount = this.multipleSelection.length;
    },

    /**
     * 删除题目
     */
    handleDelete(index, row) {
      this.$confirm("此操作将删除该题目,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch((e) => {});
    },

    /**
     * 编辑题目
     */
    handleEdit(index, row) {},

    /**
     * 创建试卷
     */
    async submit() {
      const name = this.ruleForm.name;
      const time = this.num
      const classId = this.options.find(item => item.value === this.classList).id
      const subjectIds = this.multipleSelection.map(item => item.id)
      if (!name) return info('请填写试卷名字')
      if (subjectIds.length === 0) return info('请选择题目')

      // 创建答卷
      const res = await createPaper({name, time, classId, subjectIds})
      if (res.code === 1) {
        success(res.msg)
        this.ruleForm.name = ""
        this.selectCount = 0
      } else {
        error(res.msg)
      }
    } 
  },
  async created() {
    const res = await getAllClass(1, 500);
    this.options = res.data.map((item) => ({ value: item.name, id: item.id }));
    this.classList = this.options[0].value;

    // 获取所有的试题
    const result = await getAllSubjects();
    this.tableData = formatTime(result.data);
  },
};
</script>

<style lang="scss" scoped></style>
